
<template>
  <div class="breadcrumb">
    <ol>
      <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
        <router-link :to="breadcrumb.to">{{ breadcrumb.text }}</router-link>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbs: [],
    };
  },
  created() {
    this.updateBreadcrumbs();
  },
  watch: {
    $route() {
      this.updateBreadcrumbs();
    },
  },
  methods: {
    updateBreadcrumbs() {
      const matchedRoutes = this.$route.matched;
      this.breadcrumbs = matchedRoutes.map((route, index) => ({
        text: route.meta.breadcrumb || route.name || "Home",
        to: this.generateTo(route.path, index),
      }));
    },
    generateTo(path, index) {
      const paths = path.split('/');
      if (index === 0) {
        return '/';
      } else {
        return paths.slice(1, index + 1).join('/');
      }
    },
  },
};
</script>

<style scoped>
.breadcrumb {
  margin-bottom: 10px;
}

.breadcrumb ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-block;
  margin-right: 5px;
}

.breadcrumb li:last-child {
  margin-right: 0;
}

.breadcrumb li a {
  color: #337ab7;
  text-decoration: none;
}
</style>